<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 多色柱状图</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="chart-container"></div>

    <script>
        // 初始化 ECharts 实例
        const chartDom = document.getElementById('chart-container');
        const myChart = echarts.init(chartDom);

        // 定义数据
        const data = [
            { name: '类别1', type1: 120, type2: 80, type3: 60, type4: 40 },
            { name: '类别2', type1: 150, type2: 90, type3: 70, type4: 50 },
            { name: '类别3', type1: 100, type2: 70, type3: 50, type4: 30 },
            { name: '类别4', type1: 180, type2: 100, type3: 80, type4: 60 },
            { name: '类别5', type1: 90, type2: 60, type3: 40, type4: 20 }
        ];

        // 配置项
        const option = {
            title: {
                text: '多色堆叠柱状图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(item => {
                        result += item.seriesName + ': ' + item.value + '<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['类型1', '类型2', '类型3', '类型4'],
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.name)
            },
            yAxis: {
                type: 'value',
                name: '数值'
            },
            series: [
                {
                    name: '类型1',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: '#5470c6'
                    },
                    data: data.map(item => item.type1)
                },
                {
                    name: '类型2',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: '#91cc75'
                    },
                    data: data.map(item => item.type2)
                },
                {
                    name: '类型3',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: '#fac858'
                    },
                    data: data.map(item => item.type3)
                },
                {
                    name: '类型4',
                    type: 'bar',
                    stack: 'total',
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        color: '#ee6666'
                    },
                    data: data.map(item => item.type4)
                }
            ]
        };

        // 使用配置项显示图表
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    </script>
</body>

</html>